<template>
	<view class="address-management">
		<view class="address-management-top"></view>
		<view v-if="addressList.length > 0" class="address-management-list">
			<view
				class="address-management-list-item flex-center-between"
				v-for="item in addressList"
				:key="item.id">
				<view class="info" @click="gotoConformOrder(item)">
					<view>
						<text>{{item.name}}</text>
						<text class="phone">{{item.phone}}</text>
						<text class="selected">{{item.selected ? '选中' : ''}}</text>
					</view>
					<view class="address text-overflow-one">
						{{item.province}}{{item.city}}{{item.town}}{{item.address}}
					</view>
				</view>
				<image 
					src="../../static/images/delete.png" 
					style="width: 40rpx;height: 40rpx;" 
					mode="" 
					@click="deleteAddressData(item)"
				></image>
				<image 
					src="../../static/images/edit.png" 
					style="width: 36rpx;height: 36rpx;margin-left: 30rpx;" 
					mode="" @click="pageTo('addressEdit?id='+item.id)"
				></image>
				<!-- <uni-icon type="compose" size="26" @click="pageTo('addressEdit?id='+item.id)"></uni-icon> -->
			</view>
		</view>
		
		<view v-else class="no-data">
			<image class="no-data-img" src="../../static/images/no-data.png" mode="aspectFit"></image>
			暂无收货地址哦~
		</view>
		
		<view class="address-add">
			<button class="address-add-btn" @click="pageTo('addressEdit')">
				<uni-icon type="plusempty" color="#fff" size="20"></uni-icon>
				<text>新建地址</text>
			</button>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon.vue"
	export default {
		components: {
			uniIcon,
		},
		data() {
			return {
				addressList: []
			}
		},
		onShow() {
			this.gatAddressList()
		},
		methods: {
			/**
			 * 获取地址列表数据
			 */
			async gatAddressList() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/address/list',
					data: { page: 1, row: 10 }
				})
				if (res.status === 1) {
					this.addressList = res.data
					if (res.data.length > 0) {
						this.getSelectedAddress()
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 标记当前选择的地址
			 */
			getSelectedAddress() {
				uni.getStorage({
					key: 'ADDRESS',
					success: res => {
						// console.log(res.data)
						if (Object.keys(res.data).length !== 0) {
							this.addressList = this.addressList.map(item=>{
								if (item.id == res.data.addressId) {
									item.selected = true
								} else {
									item.selected = false
								}
								return item
							})
						}
					}
				})
			},
			/**
			 * 返回订单确认页，并设置地址数据
			 * @param {Object} item
			 */
			gotoConformOrder(item) {
				uni.setStorage({
					key: 'ADDRESS',
					data: {
						addressId: item.id,
						addressName: item.name,
						addressPhone: item.phone,
						addressArea: item.province + item.city + item.town + item.address
					}
				})
				uni.navigateBack()
			},
			/**
			 * 删除用户地址信息
			 */
			async deleteAddressData(item) {
				let self = this;
				let res = await this.$http.request({
					method: 'post',
					url: '/api/address/del',
					data: { id: item.id }
				})
				if (res.status === 1) {
					uni.showToast({
						title: '删除地址成功',
						icon: 'success'
					})
					uni.removeStorageSync('ADDRESS');
					self.gatAddressList()
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 返回
			 */
			pageBack() {
				uni.hideKeyboard()
				uni.navigateBack()
			},
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			}
		}
	}
</script>

<style lang="scss">
	.address-management{
		padding-top: 10rpx;
		position: relative;
		&-top{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: 10rpx;	
			width: 100%;
			background: #fff url(../../static/images/address-top-border.png) no-repeat;
			background-size: 100% 100%;
		}
		&-list{
			padding: 0 30rpx;
			margin-bottom: 164rpx;
			border-bottom: 1rpx solid $uni-border-color;
			background: $uni-bg-color;
			&-item{
				height: 168rpx;
				border-bottom: 1rpx solid $uni-border-color;
				&:last-child{
					border-bottom:none;
				}
				.info{
					width: 600rpx;
					.phone{
						margin-left: 10rpx;
					}
					.selected{
						display: inline-block;
						padding: 0 10rpx;
						margin: 0 20rpx;
						font-size: $uni-font-size-sm2;
						color: $uni-text-color-inverse;
						border-radius: $uni-border-radius-base;
						background-image: linear-gradient(-45deg, #00b5c4 0%, #52c7d1 100%), linear-gradient(#52c7d1, #52c7d1);
					}
					.address{
						font-size: $uni-font-size-sm2;
					}
				}
			}
		}
		.address-add{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			&-btn{
				margin: 38rpx auto;
				width: 559rpx;
				height: 88rpx;
				line-height: 88rpx;
				font-size: $uni-font-size-base;
				color: $uni-text-color-inverse;
				background-color: #504e56;
				border-radius: 44px;
			}
		}
	}
</style>
